<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>类别管理</title>
</head>
<link rel="stylesheet" href="backend/bootStrap/css/bootstrap.min.css">
<link rel="stylesheet" href="backend/css/main.css">
<body>
<div id="content4" class="content-body">
    <div class="user_table">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">类别列表</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">添加类别</a></li>
        </ul>
        <br/>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">
                <!--嵌套基础面板：处理用户列表面板-->
                    <div class="text-center">
                        <!--内联表单-->
                        <form class="form-inline" action="./typeList" method="post" id="selectUsers" style="font-size: 18px;margin-bottom: 6px;margin-top: 6px;">
                            <div class="form-group">
                                <label for="selectGoodsTypeName">商品类别</label>
                                <input type="text" class="form-control" id="selectGoodsTypeName" name="selectGoodsTypeName" value="${param.selectGoodsTypeName }">
                            </div>
                            <button type="submit" class="btn btn-success">Send</button>
                            <button type="reset" class="btn btn-primary">Reset</button>
                        </form>
                    </div>
                    <!--栅格布局-->
                    <div class="row">
                        <div class="col-md-12">
                            <!--表格-->
                            <table class="table table-hover table-bordered" style="width: 100%;">
                                <thead class="thead-light">
                                <tr>
                                    <th style="white-space:nowrap;">#</th>
                                    <th style="white-space:nowrap;">商品类别</th>
                                    <th style="white-space:nowrap;">商品描述</th>
                                    <th style="white-space:nowrap;">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <c:if test="${empty types }">
                                    <th colspan="4">暂无数据</th>
                                </c:if>
                                <c:if test="${!empty types }">
                                    <c:forEach var="type" items="${types }">
                                        <tr style="font-size: 18px">
                                            <td style="white-space:nowrap;">${type.typeId}</td>
                                            <td style="white-space:nowrap;">${type.typeName }</td>
                                            <td style="white-space:nowrap;">${type.typeDescription }</td>
                                            <td style="white-space:nowrap;">
                                                <a href="#" class="btn btn-danger btn-md" onclick="confirmDelete(${type.typeId})">删除</a>
                                                <a href="" class="btn btn-info btn-md" data-toggle="modal" data-target="#updateUserModal">修改</a>
                                            </td>
                                        </tr>
                                    </c:forEach>
                                    <tr>
                                        <th colspan="4">${page }</th>
                                    </tr>
                                    <!-- 模态框（Modal） -->
                                    <div class="modal fade" id="updateUserModal" tabindex="-1" role="dialog" aria-labelledby="updateUserModalLabel" aria-hidden="true">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header" style="background-color: #f5f5f5; border-top-left-radius: 5px; border-top-right-radius: 5px;">
                                                    <h5 class="modal-title" id="updateUserModalLabel">修改类别信息</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body" style="padding: 20px; background-color: #fff; font-size: 18px;font-family: 微软雅黑">
                                                    <!-- 表单内容 -->
                                                    <form method="post" action="./updateType" id="updateForm">
                                                        <div class="form-group">
                                                            <label for="goodsTypeID">商品类别编号</label>
                                                            <input type="text" class="form-control" id="goodsTypeID" name="goodsTypeID" readonly>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="goodsTypeName">商品类别名称</label>
                                                            <input type="text" class="form-control" id="goodsTypeName" name="goodsTypeName">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="goodsTypeDescription">商品类别描述</label>
                                                            <input type="text" class="form-control" id="goodsTypeDescription" name="goodsTypeDescription">
                                                        </div>
                                                    </form>
                                                </div>
                                                <div class="modal-footer" style="text-align: right;">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                                    <button type="button" class="btn btn-primary" id="updateUser" onclick="updateUser()">保存</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </c:if>
                                </tbody>
                            </table>
                        </div>
                    </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="profile">
                <!--嵌套基础面板：处理用户列表面板-->
                <div class="panel panel-default">
                    <div class="panel-body">
                        <form method="post" action="./addType" id="insertForm" style="width: 800px;margin: 0 auto">
                            <div class="form-group">
                                <label for="addGoodTypeName">商品类别名称</label>
                                <input type="text" class="form-control" id="addGoodTypeName" name="addGoodTypeName" placeholder="商品名称">
                            </div>
                            <div class="form-group">
                                <label for="addGoodTypeDesc">商品类别描述</label>
                                <textarea class="form-control" rows="3" id="addGoodTypeDesc" name="addGoodTypeDesc"></textarea>
                            </div>
                            <button type="submit" class="btn btn-success">添加</button>
                            <button type="reset" class="btn btn-primary">重置</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="backend/js/jquery-3.7.1.js"></script>
<script src="backend/bootStrap/js/bootstrap.min.js"></script>
<script>
    // 获取所有修改按钮
    var updateBtns = document.querySelectorAll('.btn-info');

    // 遍历修改按钮，为每个按钮添加点击事件
    for (var i = 0; i < updateBtns.length; i++) {
        updateBtns[i].addEventListener('click', function() {
            // 获取当前行的数据
            var row = this.parentElement.parentElement;
            var goodsTypeID = row.cells[0].innerText;
            var goodsTypeName = row.cells[1].innerText;
            var goodsTypeDescription = row.cells[2].innerText;
            // 将数据填充到模态框中
            document.getElementById('goodsTypeID').value = goodsTypeID;
            document.getElementById('goodsTypeName').value = goodsTypeName;
            document.getElementById('goodsTypeDescription').value = goodsTypeDescription;
        });
    }
    // 为模态框的保存按钮添加点击事件
    document.querySelector('#updateUser').addEventListener('click', function() {
        // 提交修改后的数据
        document.getElementById('updateForm').submit();
        // 关闭模态框
        $('#updateUserModal').modal('hide');
    });
</script>
<script>
    document.getElementById('add-file-input').addEventListener('change', function (e) {
        var file = e.target.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById('addAvatar').src = e.target.result;
            }
            reader.readAsDataURL(file);
        }
    });
</script>
<script>
    function confirmDelete(typeId) {
        if (confirm('确定要删除吗？')) {
            window.location.href = './deleteType?id=' + typeId;
        }
    }
</script>
<script>
    window.onload = function() {
        checkError();
    }
    function checkError() {
        var errorMsg = "${errorMsg}";
        var successMsg = "${successMsg}";
        if (successMsg){
            alert(successMsg);
            <% session.removeAttribute("successMsg"); %>
        }
        if (errorMsg) {
            alert(errorMsg);
            <% session.removeAttribute("errorMsg"); %>
        }
    }
</script>
</body>
</html>
